<template>
  <div class="artist" :form="form">
    <!--    <div class="category">-->
    <!--      <div class="area">-->
    <!--        地区：-->
    <!--        <div-->
    <!--          class="area-item"-->
    <!--          v-for="(item,index) in area"-->
    <!--          :key="index"-->
    <!--          @click="areaClick(item.areaId)"-->
    <!--          :class="{action:areaIndex==index}"-->
    <!--        >{{item.areaName}}</div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div>
      <div class="all" @click="findAllMusic">
        全部
      </div>
    </div>
    <div class="category">
      <div class="type" v-if="type!=null">
        类型：
        <div
          class="type-item"
          v-for="(item,index) in type"
          :key="index"
          @click="typeClick(item.musicTypeId)"

        >{{item.musicTypeName}}</div>
      </div>
<!--      :class="{action:typeIndex==index}"-->
    </div>
    <div class="category">
      <div class="language">
        语言：
        <!--          :class="{action:languageIndex==index}-->
        <div
          class="language-item"
          v-for="(item,index) in language"
          :key="index"
          @click="languageClick(item.languageId)"


        >{{item.languageName}}</div>
      </div>
<!--      :class="{action:languageIndex==index}"-->
    </div>
    <!-- @pullingUp="pullingUp"-->
    <!--    <scroll ref="scroll" class="artist-scroll" :pull-up-load="true" >-->
    <!--      <artist-list :artist-list="artistlist" />-->
    <!--    </scroll>-->

    <div>

      <el-select
        v-model="value"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="请输入关键词"
        :remote-method="remoteMethod"
        :loading="loading">
<!--        <el-option-->
<!--          v-for="item in options"-->
<!--          :key="item.value"-->
<!--          :label="item.label"-->
<!--          :value="item.value">-->
<!--        </el-option>-->
      </el-select>
    </div>
    <div>

      <table class="el-table">

        <thead>
        <th>编号</th>
        <th>专辑封面</th>
        <th>音乐标题</th>
        <th>歌手</th>
        <th>音乐类型</th>
        <th>语种</th>
        <th>音乐链接</th>
        <th>操作</th>
        </thead>
        <tbody>
        <!--        @click="playMusic()"-->
        <tr class="el-table__row" v-for="(item, index) in musiclist" :key="index" >
          <td>{{ index+1}}</td>
          <td>
            <div class="img-wrap">
              <span class="iconfont icon-play">
<!--                 @click="playMusic(item.musicId)" -->
               <img :src="item.musicImage" :img="item.musicId"style="width: 50px;height: 50px" />
              </span>
            </div>
          </td>
          <td><template slot-scope="scope">
            <span v-html="scope.item.musicName"></span>
          </template>
            {{ item.musicName}}
          </td>
          <td>{{ item.singerName}}</td>
          <td>{{ item.musicTypeName}}</td>
          <td>{{item.languageName}}</td>
          <td>
            <div class="song-audio">
              <audio id="player" :src="item.musicUrl" controls="controls"
                     preload="true"
                     @canplay="startPlay"
                     @ended="ended"
              ></audio>
            </div>
          </td>
          <td><button @click="musicDetail(item.musicId)">查看详情</button></td>
        </tr>
        </tbody>
      </table>
      <el-pagination
        :page-size=pageSize
        :pager-count="7"
        :current-page.sync=pageNum
        layout="prev, pager, next"
        :total=sum
        @current-change="findAllMusic"
        align="center"
      >
      </el-pagination>
    </div>
    <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
  </div>

</template>

<script>
  import axios from "axios";

  export default {
    name: "list",
    data() {
      return {
        areaIndex: 0,
        typeIndex: 0,
        languageIndex:0,
        musiclist: [],
        pageNum:'',
        pageSize:10,
        sum:'',
        xuanze:{
          musicTypeId:'',
          languageId:''
        },
        // area: [],
        type: [],
        language:[],
        form:{
          musicTypeId:'',
          languageId:''
        }
      };
    },
    mounted() {
      this.findAllMusic()
      // this.findArea()
      this.findMusicType()
      this.findLanguage()
    },
    // computed:{
    //
    // }

    methods:{
      findAllMusic(){
        axios.get("http://127.0.0.1:8200/fancy-music-category/category/findAllMusic/"+this.pageNum+"/"+this.pageSize).then(res=>{
          console.log(res.data)
          this.musiclist=res.data.list
          this.sum=res.data.total;
        })
      },
      findMusicType(){
        axios.get("http://127.0.0.1:8200/fancy-music-category/musicType/selectAllMusicType").then(res=>{
          console.log(res.data)
          this.type=res.data
        })
      },
      findLanguage(){
        axios.get("http://127.0.0.1:8200/fancy-music-category/language/selectAll").then(res=>{
          console.log(res.data)
          this.language=res.data
        })
      },
      areaClick(index) {
        this.areaId = index;
        this.findAllMusic();
      },
      startPlay(){
        let player = document.querySelector("#player");
        //开始播放
        // player.play();
      },
      //播放完成之后触发
      ended(){
        this.isPlay=false
      },
      musicDetail(id){
        alert(id)
      },
      typeClick(id){
        // this.selectMusic(id,cid)
        // // this.index=id;
        //  this.xuanze.musicTypeId=id
        axios.get("http://127.0.0.1:8200/fancy-music-category/category/findMusicByTypeId/"+id).then(res=>{
          console.log(res.data);
          this.musiclist=res.data
        })
        // this.selectMusic()
      },
      languageClick(cid){
        axios.get("http://127.0.0.1:8200/fancy-music-category/category/findMusicByLanguageId/"+cid).then(res=>{
            console.log(res.data);
            this.musiclist=res.data
        })
        // this.xuanze.languageId=cid
        // this.selectMusic()
      },
      selectMusic(){
        axios.post("http://127.0.0.1:8200/fancy-music-category/category/getMusicById", {"musicTypeId":this.xuanze.musicTypeId,"languageId":this.xuanze.languageId}).then(res=>{
          console.log(res.data);
          this.musiclist=res.data
        })
      },
      musicDetail:function(id){
        this.$router.push("/musicDescription/"+id)
      },

      remoteMethod(query) {
        console.log(query)
        this.query=query;
        if (query !== '') {
          this.loading = true;
          //使用axios去查询内容
          axios.get("http://127.0.0.1:8200/fancy-music-es/search/"+query).then(res=>{
            this.musiclist=res.data.list;
            console.log(res.data.list)
          })
          //
          // setTimeout(() => {
          //   this.loading = false;
          //   this.options = this.list.filter(item => {
          //     return item.label.toLowerCase()
          //       .indexOf(query.toLowerCase()) > -1;
          //   });
          // }, 200);
        } else {
          this.findAllMusic();
        }
      },
    }
  }
</script>

<style scoped>
  .artist {
    width: 100%;
    height: 100%;
  }
  .category {
    color: #828385;
  }
  .area {
    display: flex;
  }
  .type {
    margin-top: 10px;
    display: flex;
  }
  .language {
    margin-top: 10px;
    display: flex;
  }
  .area-item,
  .type-item,
  .language-item {
    padding: 0px 10px;
  }
  .action {
    color: #b82525;
  }
  .artist-scroll {
    height: calc(100% - 55px);
    overflow: hidden;
    margin-top: 10px;
  }
  .el-table .img-wrap {
    position: relative;
    width: 40px;
    height: 40px;
  }
  .el-table.img-wrap img {
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }
  .el-table td {
    border-bottom: none;
  }
  .song-audio{
    display: inline;
  }


</style>
